<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="sidebar">
    <h2>管理菜单</h2>
    <ul>
        <li><a href="#">会员管理</a></li>
        <li><a href="#">商品分类管理</a></li>
        <li><a href="#">商品管理</a></li>
        <li><a href="#">订单管理</a></li>
    </ul>
</div>
<div class="content">
    <div id="member-management">
        <h2>会员管理</h2>
        <ul>
            <li><a href="userList.jsp">会员查询</a></li>
        </ul>
    </div>
    <div id="product-category-management">
        <h2>商品分类管理</h2>
        <ul>
            <li>添加商品分类</li>
            <li>查询商品分类</li>
        </ul>
    </div>
    <div id="product-management">
        <h2>商品管理</h2>
        <ul>
            <li>添加商品</li>
            <li><a href="./ProductServlet"> 查询商品</a></li>
        </ul>
    </div>
    <div id="order-management">
        <h2>订单管理</h2>
        <ul>
            <li>查询订单</li>
        </ul>
    </div>
    <!-- 可以通过JavaScript动态显示/隐藏这些部分，根据侧边栏的点击事件 -->
</div>

<!-- 这里可以添加JavaScript来处理侧边栏的点击事件，以动态显示/隐藏内容区域的不同部分 -->
<script>
    // 示例：点击侧边栏链接时，显示对应的内容区域（这里只是简单演示，未实现完整的动态效果）
    document.querySelectorAll('.sidebar ul li a').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止链接的默认行为（跳转）
            var contentId = this.text.toLowerCase().replace(/\s+/g, '-').replace(/管理$/, ''); // 根据链接文本生成对应的内容区域ID
            var contents = document.querySelectorAll('.content > div'); // 获取所有内容区域
            contents.forEach(function(content) {
                content.style.display = (content.id === contentId) ? 'block' : 'none'; // 显示或隐藏内容区域
            });
            // 可以在这里添加额外的逻辑，比如高亮当前选中的侧边栏项
        });
    });

    // 初始化时显示第一个内容区域
    document.querySelector('.content > div').style.display = 'block';
</script>
</body>
</html>